import React, { Component } from 'react'
import axios from 'axios'
import {Types} from '../../../types/types'
import {connect} from 'react-redux'

interface Istate{
    // list:Types[]
}

interface Iprops{
    types:string[],
    initData:(list:Types[]) => void,
    history:any
}

class Home extends Component<Iprops,Istate> {
    
    componentDidMount(){
        axios.get('/api/list').then(res => {
            this.props.initData(res.data);
        })
    }
    render() {
        console.log(this.props.types);
        return (
            <div>
                {this.props.types.map(item => <div key={item} onClick={() => {
                    this.props.history.push('/classify/'+item)
                }}>{item}</div>)}
            </div>
        )
    }
}

let stateMapToProps = (state:any) => {
    return {
        types:state.list.map((item:Types) => item.type)
    }
}

let dispatchMapToProps = (dispatch:any) => {
    return {
        initData(list:Types[]){
            dispatch({type:'INIT_DATA',list})
        }
    }
}

export default connect(stateMapToProps,dispatchMapToProps)(Home)